import React from 'react';
import { Breadcrumb, Icon, Divider } from 'antd';
import styles from './Breadcrumb.less';
import { connect } from 'dva';
import routerDef from 'utils/routerDef';
@connect(({ common }) => ({
    breadState: common.breadState
}))
class Bread extends React.PureComponent {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        const { dispatch } = this.props;

        dispatch({
          type: 'common/getBreadState',
          payload: {}
        });
      }
    moreLeft = () => {
        let left = this.BreadListBox.scrollLeft;
        left = left - 50;
        if (left < 0) {
            left = 0
        }
        this.BreadListBox.scrollLeft = left;
    }

    moreRight = () => {
        let left = this.BreadListBox.scrollLeft;
        left = left + 50;
        this.BreadListBox.scrollLeft = left;
    }

    changeBread = (item) => {
        routerDef.push(item.url);
        const { dispatch } = this.props;
        // dispatch({
        //   type: 'common/setMenuState',
        //   payload: {
        //     open: "",
        //     selected: menuItem.url
        //   }
        // });

        dispatch({
            type: 'common/setBreadState',
            payload: item
        });
    }

    refreshPage = () => {
        window.location.reload();
    }

    deletedBread = (index,e) => {
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
        const { dispatch } = this.props;
        dispatch({
            type: 'common/delBreadByIndex',
            payload: { index }
        });
    }


    render() {
        const { moreLeft, moreRight, changeBread, refreshPage, deletedBread } = this;
        const { breadState } = this.props;
        console.log("breadState", breadState);
        return (<div className={styles.breadcrumbBox + " centerY"}>
            <div onClick={moreLeft} className={styles.breadcrumbMoreL + " centerXY"}>
                <Icon type="backward" />
            </div>
            <div onClick={moreRight} className={styles.breadcrumbMoreR + " centerXY"}>
                <Icon type="forward" />
            </div>
            <div onClick={refreshPage} className={styles.breadcrumbRefresh + " centerXY"}>
                <Icon type="sync" />
                <span style={{ marginLeft: "5px" }}>刷新</span>
            </div>
            <div ref={(event) => { this.BreadListBox = event }} className={styles.breadcrumbList + " centerY"}>
                <div onClick={() => {
                    changeBread({
                        url: "/",
                        isIndex: true
                    })
                }} className={styles.breadcrumbIndex + ("/" == breadState.active.url ? (" " + styles.active) : "") + " centerY"}>
                    <div className={styles.breadcrumbItemIcon}>
                        <Icon type="home" />
                    </div>
                    <div className={styles.breadcrumbItemTxt}>主页</div>
                </div>

                {breadState.list.map((item, index) => {
                    return (<div onClick={() => { changeBread(item) }} key={item.url} className={styles.breadcrumbItem + (item.url == breadState.active.url ? (" " + styles.active) : "") + " centerY"}>
                        <div className={styles.breadcrumbItemIcon}>
                            {item.icon && <Icon type={item.icon} />}
                        </div>
                        <div className={styles.breadcrumbItemTxt}>{item.menu_name}</div>
                        <div onClick={(e) => { deletedBread(index,e) }} className={styles.breadcrumbItemClose}>
                            <Icon type="close-circle" />
                        </div>
                    </div>)
                })}
            </div>
        </div>);
    }
}

export default Bread;

{/* <Breadcrumb itemRender={routeRender}>
            <BreadcrumbItem>
                <Icon type="home" />
            </BreadcrumbItem>
            <BreadcrumbItem>
                <Icon type="user" />
                <span>Application List</span>
            </BreadcrumbItem>
            <BreadcrumbItem>Application</BreadcrumbItem>
        </Breadcrumb> */}